
@import "../../../_public/less/_core.less";

/**
 * 导航
 */
@nav_height: 48px;
body:before{
  content: '';
  display: block;
  height: @nav_height + 2;
}
.app_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  .nav {
    float: left;
    li {
      float: left;
      a {
        display: block;
        height: @nav_height;
        padding: 0 15px;
        outline: none;
        overflow: hidden;
        line-height: @nav_height;
        color: #333;
        text-align: center;
        font-size: 16px;
        .transition(.2s);
        i,
        span{
          display: inline-block;
          vertical-align: middle;
          height: 30px;
          line-height: 30px;
        }
        i {
          margin-right: 6px;
          text-align: center;
          font-size: 24px;
          display: none;
        }
        &:hover {
          color: #f70
        }
      }
      &:nth-child(1) a i{
        display: inline-block;
      }
      &.cur{
        a {
          color: #f70
        }
      }
    }
  }
  .side {
    float: right;
    height: @nav_height;
    font-size: 0;
    li {
      display: inline-block;
      height: @nav_height;
      line-height: @nav_height;
      padding:0 10px;
      a {
        font-size: 12px
      }
      &.cur{
        a {
          color: #f70
        }
      }
    }
  }
}
.nav_body {
  position: absolute;
  border-top: 2px solid #f70;
  top: 0;
  left: 0;
  width: 100%;
  height: @nav_height;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  z-index:2;
}
.nav_appname{
  display: none;
}
.nav_moreBtn{
  display: none;
}
@media screen and (max-width: 660px) {
  .app_container,
  .app-footer{
    .transition(.2s,ease);
  }
  .app_nav{
    height: @nav_height + 2;
    background: #fff;
    box-shadow: 0 0 4px #000;
    .side{
      float: none;
      text-align: center;
      border-top: 1px solid #eee;
      li{
        padding: 0 30px;
      }
    }
  }
  .nav_appname{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: @nav_height;
    line-height: @nav_height;
    text-align: center;
    font-size: 20px;
    background: #fff;
    z-index: 2;
    i{
      margin-right: .5em;
    }
  }
  .nav_body{
    width: 100%;
    height: auto;
    top: -300px;
    left: 0;
    border: none;
    box-shadow: 0 2px 2px rgba(0,0,0,.4);
    opacity: 0;
    z-index: 2;
    .transition(.2s,ease);
    .nav{
      float: none;
      margin: 20px 0;
      li{
        float: none;
        a{
          i{
            display: inline-block;
          }
          span{
            width: 5em;
            padding-left: 5px;
            font-size: 14px;
            text-align: left;
          }
        }
      }
    }
  }
  .nav_moreBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    top: 5px;
    right: 10px;
    background: #fff;
    z-index:3;
  }
  .nav_Btn_ico {
    display: block;
    position: absolute;
    width: 22px;
    height: 4px;
    left: 9px;
    border-radius: 4px;
    background: #333;
    .transition(0.2s,ease);
  }
  .nav_Btn_ico_1 {
    top: 10px
  }
  .nav_Btn_ico_2 {
    top: 18px
  }
  .nav_Btn_ico_3 {
    top: 26px
  }
  .nav_slidedown{
    .nav_body {
      top: @nav_height;
      opacity: 1;
    }
    .nav_mask{
      position:fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index:1;
    }
    .nav_appname{
      color: #aaa;
    }
    .nav_Btn_ico_1 {
      .transform(translate(0,8px) rotate(-45deg));
    }
    .nav_Btn_ico_2 {
      opacity: 0;
      .transform(translate(10px,0));
    }
    .nav_Btn_ico_3 {
      .transform(translate(0,-8px) rotate(45deg));
    }
    .app_container,
    .app-footer{
      opacity: .4;
      .transform(translateY(100px));
    }
  }
}